<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js"></script>
    <style>
        .passive {
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: auto;
        }

        li {
            height: 300px;
        }
    </style>
</head>
<body>

<div id="root">
    <h1> {{msg}}</h1>
    <!--
    事件修饰符的基本使用：
    1.语法： v-on:event.修饰符="事件名称"或者 @event.修饰符="事件名称"
    2.prevent修饰符： 阻止默认事件的发生
    3.stop修饰符： 阻止事件冒泡
    4.capture修饰符： 使用事件捕获模式
    5.self修饰符： 只有当前元素触发的事件才会执行事件处理函数
    6.once修饰符： 事件只执行一次
    7.passive修饰符： 事件的默认行为立即执行，无需等待事件回调执行完毕
    -->
    <!-- prevent使用示例   页面不会跳转到百度首页-->
    <a href="https://www.baidu.com" @click.prevent="showInfo">{{clickTip}}(阻止默认事件)</a>
    <hr/>
    <!-- stop使用示例   -->
    <div @click='showInfo'>
        <button @click.stop="showInfoParam($event,'stop')">{{clickTip}}(只有当前元素触发的事件才会执行事件处理函数)
        </button>
    </div>
    <hr/>
    <!-- capture使用示例   -->
    <button @click.capture="showInfoParam($event,'capture')">{{clickTip}}(使用事件捕获模式)</button>
    <hr/>
    <!-- self使用示例  加上.self修饰符下面的click事件只会触发一次,因为当前元素为button -->
    <div @click='showInfo'>
        <button @click.self="showInfoParam($event,'self')">{{clickTip}}(只有当前元素触发的事件才会执行事件处理函数)
        </button>
    </div>
    <hr/>
    <!-- once使用示例  下面的click事件只会触发一次 -->
    <button @click.once="showInfoParam($event,'once')">{{clickTip}}(事件只执行一次)</button>
    <hr/>
    <!-- passive使用示例  会先滑动滚轮再执行休眠动作再-->
    <ul class="passive" @wheel="showPassiveInfo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '事件修饰符',
            clickTip: '点击'
        },
        methods: {
            // 事件处理函数
            showInfo(event) {
                console.log(event.target.innerHTML);//button
                console.log(event);//event是原生的event对象
                console.log(this);//vm
                alert('你好,world');
            },
            showInfoParam(event, num) {
                console.log(event, num);//button

                alert('你好,world--' + num);
            },
            showPassiveInfo() {
                //休眠1s
                setTimeout(() => {
                    alert('你好,world')
                }, 10000)
            }
        }
    });
</script>
</body>

</html>